<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.js"></script>
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" id="friend_list">
				<span class="mui-icon mui-icon-chat"><span class="mui-badge mui-badge-red" id="count">0</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" id="req_list"> 
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">好友请求</span>
			</a>
			<a class="mui-tab-item" id="self">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
	<script type="text/javascript" charset="utf-8">
		mui.init({
			subpages: [{
				url: 'main.html',
				id: 'main.html',
				styles: {
					top: "0px",
					bottom: "50px"
				},
				extras: {}
			}]
		})
		
		var ws = null;
		var user_info = null;
		mui.plusReady(function () {
			if(window.localStorage.getItem("user_id")){
				mui.post(window.serv + '/auto_login',{
						_id:window.localStorage.getItem("user_id")
				},function(data){ 
						user_info = data.DATA;
						console.log(JSON.stringify(user_info));
						document.getElementById("count").innerText = user_info.chat.count;
						create_ws(data.DATA._id);
					},'json'
				);
			}		    
		}) 

		function create_ws(id) {
			ws = new WebSocket(window.ws_serv + id);
			ws.onmessage = function(eventMessage) {
				var recv_msg = JSON.parse(eventMessage.data);
//				user_info[recv_msg.from_user] += 1;
				document.getElementById("count").innerText = parseInt(document.getElementById("count").innerText)+1;
//				var p = plus.audio.createPlayer(window.chat_serv + recv_msg.chat);
////				mui.toast("开始播放语音消息");
//				p.play();
				var chat = plus.webview.getWebviewById("chat.html");
				mui.fire(chat,'add_chat',recv_msg);
				
				
				console.log(eventMessage.data);
			};
			ws.onclose = function() {
				create_ws(id);
			}
		}

		document.addEventListener("send_music", function(event) {
			var s = JSON.stringify(event.detail);
			ws.send(s);
		});
		
		document.addEventListener("send_chat", function(event) {
			var s = JSON.stringify(event.detail);
			ws.send(s);
		});
		
		document.getElementById('self').addEventListener('tap', function() {
			if(window.localStorage.getItem("user_id")) {
				mui.openWindow({
					url: "user_info.html",
					id: "user_info.html",
					styles: {
						top: "0px",
						bottom: "50px"
					},
					extras:user_info
				})
			} else {
				mui.openWindow({
					url: "login.html",
					id: "login.html",
					styles: {
						top: "0px",
						bottom: "50px"
					}
				})
			}

		})

		document.getElementById('home').addEventListener('tap', function() {
			mui.openWindow({
				url: 'main.html',
				id: 'main.html',
				styles: {
					top: "0px",
					bottom: "50px"
				},
				extras: {}
			});
		})
		
		document.getElementById('friend_list').addEventListener('tap',function () {
		    mui.openWindow({ 
				url: 'message.html',
				id: 'message.html',
				styles: {
					top: "0px",
					bottom: "50px"
				},
				extras: user_info,
				createNew:true
			});    
		})
		
		document.addEventListener("cut",function(eventMessage){
			var cut = eventMessage.detail.cut;
			var count = parseInt(document.getElementById("count").innerText);
			document.getElementById("count").innerText = count - cut;
		})
		
		document.getElementById('req_list').addEventListener('tap',function () {
		    mui.openWindow({ 
				url: 'req_list.html',
				id: 'req_list.html',
				styles: {
					top: "0px",
					bottom: "50px"
				},
				createNew:true
			});        
		})
	</script>

</html>